<template>
  <div class="login">
    <div class="loginBox">
      <div class="loginHeader">
        <p>WELCOME</p>
        <span>七尾智慧社区管理系统后台</span>
      </div>
      <el-form class="loginUser" :model="model">
        <el-form-item>
          <el-input clearable placeholder="用户名" v-model="model.userName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable show-password placeholder="密码" v-model="model.pwd"></el-input>
        </el-form-item>
        <div class="box">
          <el-form-item>
              <el-input clearable placeholder="验证码" v-model="model.captch"></el-input>
            <div class="code" @click="obtain">获取验证码</div>
          </el-form-item>
         <div class="boxImg">
          <img :src="url" alt="" v-if="url">
         </div>
        </div>
        <!-- <el-form-item class="loginCheck">
          <div>
            <input type="checkbox" value="One" />
            <label>自动登录</label>
          </div>
          <p>忘记密码?</p>
        </el-form-item> -->
        <el-form-item style="text-align: center">
          <el-button class="loginbutton" type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import router from "../router";
import http from "../utils/http";
import { ref } from "vue";
let model = ref({ userName: "", pwd: "",captch:""});
let url = ref('');
let uuid = ref('');
// console.log(model);
let login = () => {
  http({
    url: "/sys/login",
    method: "post",
    data: {
      username: model.value.userName,
      password: model.value.pwd,
      captch:model.value.captch,
      uuid:uuid.value
    },
  }).then((res) => {
    // console.log(JSON.stringify(res.data.data.rounting[0].routings));
    if (res.data.code == 0) {
      sessionStorage.setItem(
        "user",
        JSON.stringify(res.data.data.rounting[0].name)
      );
      sessionStorage.setItem(
        "id",
        JSON.stringify(res.data.data.rounting[0].id)
      );
      sessionStorage.setItem("token", res.data.data.token);
      sessionStorage.setItem(
        "power",
        JSON.stringify(res.data.data.rounting[0].routings)
      );

      // 动态添加路由
    /*  res.data.data.rounting[0].routings.forEach((v) => {
        router.addRoute("home", {
          path: v.href,
          component: () => import(`@/views/${v.href}.vue`),
        });
      }); */
      /* 成功后跳转路由 */
      router.replace("/list/CommunityList");
      // router.replace("/home/workPlace");
    }
  });
};
let obtain = () => {
  http({
    url: "/sys/getVerify",
  }).then(({data} ) => {
    console.log(data)
    url.value = "data:image/png;base64,"+data.data.img,
      uuid.value = data.data.uuid
  })
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}

html,
body,
loginBox {
  min-width: 1000px;
  height: 100%;
}

.login {
  min-width: 1000px;
  height: 100%;
  background-image: url("../assets/images/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginHeader {
  color: #fff;
  border-left: 1px solid #fff;
  margin-bottom: 30px;
}

.loginHeader p {
  font-size: 26px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.loginHeader span {
  font-size: 20px;
  margin-left: 10px;
}

// .loginCheck {
//   color: #fff;
//   font-size: 10px;
// }

.loginbutton {
  width: 100%;
}

.box {
  position: relative;
  left: 0;
  top: 0;
  .boxImg{
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
    img{
      margin-left: 140px;
    }
  }
}

.code {
  width: 100px;
  height: 20px;
  background-color: #eee;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
  opacity: 0.5;
  position: absolute;
  right: 4px;
}
</style>
<style>
.el-form-item__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  line-height: 32px;
  position: relative;
  font-size: 4px;
  min-width: 0;
  justify-content: space-between;
}
</style>
